<template>
	<!-- 自定义列表 -->
	<div class="cust-sel-table hf">
		<el-table
			ref="multipleTable"
      :data="tableList"
      tooltip-effect="dark"
      style="width: 100%;"
			height="295"
			resizable
			border
      :rowKey="(record) => record.index"
			@row-click="rowClick"
      @selection-change="handleSelectionChange"
		>
			<el-table-column type="index" width="60" label="序号" align="center" v-if="showIdx"></el-table-column>
      <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
      <el-table-column
        v-for="(i,idx) in columns"
        :key="'col'+idx"
        :prop="i.prop"
        :label="i.label"
        :align="i.align"
        :width="i.width"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div v-if="tableType == 'docTab1'">
						<div v-if="i.prop == 'title'" class="cust-doc-tab1-title">
							<img :src="require('../images/doc-icon1.png')" width="18px" height="18px" style="margin-right:5px">
							<span> {{scope.row.title}} </span>
							<span v-if="scope.row.userName"> - {{scope.row.userName}} </span>
							<span v-if="scope.row.dateTime"> - {{scope.row.dateTime}} </span>
							<img :src="require('../images/icon-doc.png')" width="16px" height="18px" style="margin-left:5px">
						</div>
						<span v-else>
							{{scope.row[i.prop]}}
						</span>
          </div>
					<div v-else-if="tableType == 'docTab2' || tableType == 'docTab4'">
						<div v-if="i.prop == 'title'" class="cust-doc-tab1-title">
							<span> {{scope.row.title}} </span>
							<img :src="scope.row.img" width="16px" height="18px" style="margin-left:5px">
						</div>
						<span v-else>
							{{scope.row[i.prop]}}
						</span>
          </div>
					<div v-else-if="tableType == 'docTab3'">
						<div v-if="i.prop == 'title'" class="cust-doc-tab1-title">
							<img :src="scope.row.img" width="16px" height="18px" style="margin: -2px 5px 0 0 ;">
							<span> {{scope.row.title}} </span>
						</div>
						<span v-else>
							{{scope.row[i.prop]}}
						</span>
          </div>
          <span v-else>
            {{scope.row[i.prop]}}
          </span>
        </template>
      </el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			:page-sizes="[10, 20, 30, 40, 50]"
			:page-size="size"
			background
			layout="total, prev, pager, next, sizes"
			:total.sync="allPage"
			v-if="pagin"
		>
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: "custActTable",
		props: {
			showIdx: {
				type: Boolean,
				default: () => false,
			},
			list: {
				type: Array,
				default: () => [],
			},
			colConfigs: {
				type: Array,
				default: () => [],
			},
			loading: {
				type: Boolean,
				default: () => false,
			},
			tableType: {
				type: String,
				default: () => "",
			},
			pageNum: {
				type: Number,
				default: () => 1,
			},
			pageSize: {
				type: Number,
				default: () => 10,
			},
			total: {
				type: Number,
				default: () => 0,
			},
			pagin: {
				type: Boolean,
				default: () => true,
			}
		},
		data() {
			return {
				tableList: [],
				columns: [],
				currentPage: 1, // 当前页
				size: 10, // 每页条数
				allPage: 0, // 总条数
        multipleSelection: [],
			};
		},
		watch: {
			list: {
				handler(n, o) {
					n.map((i, idx) => {
						i.idx = idx + 1;
					});
					if(n && n.length>0) {
						this.tableList = n;
            this.allPage = n.length;
					} else {
            this.tableList = [];
            this.allPage = 0;
          }
				},
				deep: true,
			},
			colConfigs: {
				handler(n, o) {
					this.columns = n;
				},
				deep: true,
			},
			tableType(n) {},
			pageNum(n) {
				if (n) {
					this.currentPage = n;
				}
			},
			pageSize(n) {
				if (n) {
					this.size = n;
				}
			},
			total(n) {
				if (n) {
					this.allPage = n;
				}
			},
			loading(n) {},
      multipleSelection: {
        handler(n, o) {
          this.$emit('onSelect', n)
        },
        deep: true
      }
		},
		mounted() {
			setTimeout(() => {
        let list = this.list;
        list.map((i, idx) => {
          i.idx = idx + 1;
        });
				this.tableList = list;
				this.columns = this.colConfigs;
				if(this.tableList.length > 0) {
					this.allPage = this.tableList.length;
				}
			}, 1500);
		},
		methods: {
			/**
			 * @author Wrl
			 * 判断列表是否可勾选
			 */
			selectable(row, index) {
				if (row.type == '文档夹') {
					return false; // 禁用
				} else {
					return true; //不禁用
				}
			},
			/**
			 * @author Zwt
			 * 点击列表回调
			 */
			rowClick(row) {
				if(this.tableType == 'docTab3') {
					this.$emit("getSelectedRow", row);
				}
			},
      /**
       * @author Wrl
       * 列表选中
       */
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
			/**
			 * @author Wrl
			 * 监听每页条数选择
			 */
			handleSizeChange(val) {
				this.size = val;
				this.$emit("changePage", {
					pageNum: this.currentPage,
					pageSize: val,
				});
			},
			/**
			 * @author Wrl
			 * 监听当前页
			 */
			handleCurrentChange(val) {
				this.currentPage = val;
				this.$emit("changePage", {
					pageNum: val,
					pageSize: this.size,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.cust-sel-table {
		::v-deep {
			.el-table__body {
				tr {
					cursor: pointer;
				}
			}
			.el-table--border {
				.el-table__cell {
					border-left: 1px solid transparent !important;
					border-right: 1px solid transparent !important;
				}
			}
			.el-tooltip__popper {
				top: 0;
				left: 0;
			}
		}
    .cust-doc-tab1-title {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
    }
		.problem-management-state {
			background: transparent;
			padding: 2px 5px;
			border-radius: 3px;
			&.state1 {
				color: #ffffff;
				background: #ff8b00; // 未处理
			}
			&.state2 {
				color: #ffffff;
				background: #0086e5; // 处理中
			}
			&.state3 {
				background: transparent; // 已解决
			}
		}
		.level1 {
			color: #ff4349;
		}
		.level2 {
			color: #ff8b00;
		}
		.level3 {
			color: #87d067;
		}
		.level4 {
			color: #0086e5;
		}
		.green {
			color: #18be6b;
		}
		.red {
			color: #ed4014;
		}
		.act-btn {
			display: block;
			z-index: 100;
		}
		.table-action {
			width: 100%;
			display: inline-flex;
			justify-content: space-around;
			align-items: center;
		}
	}
</style>

<style lang="scss">
	// .current-row {
	// 	.el-table__cell {
	// 		background: rgba(21, 100, 154, 1) !important;
	// 		span {
	// 			color: #e1e9f9 !important;
	// 		}
	// 	}
	// 	.current-row:hover {
	// 		color: #e1e9f9 !important;
	// 		background: rgba(21, 100, 154, 1) !important;
	// 		.el-table__cell {
	// 			background: rgba(21, 100, 154, 1) !important;
	// 			span {
	// 				color: #e1e9f9 !important;
	// 			}
	// 		}
	// 	}
	// }
	.el-pagination {
		text-align: right;
		margin: 16px auto;
		.el-pagination__total {
			color: #11A983 !important;
		}
	}
	// .el-table__fixed-right-patch {
	// 	background-color: #0e2866 !important;
	// }
</style>
